<template>
  <div>
    <Modal
      :title="L('eaitNewuiMentt')"
      :value="value"
      @on-ok="save"
      @on-visible-change="visibleChange"
    >
      <Form
        ref="FormData"
        label-position="right"
        :label-width="120"
        :rules="userRule"
        :model="uiMenu"
      >
        <FormItem :label="L('UiMenu.Name')" prop="name">
          <Input v-model="uiMenu.name" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.DisplayName')" prop="displayName">
          <Input v-model="uiMenu.displayName" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.PermissionKey')" prop="permissionKey">
          <Input v-model="uiMenu.permissionKey" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.Path')" prop="path">
          <Input v-model="uiMenu.path" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.Icon')" prop="icon">
          <Input v-model="uiMenu.icon" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.Pid')" prop="pid">
          <Cascader :data="permissionTree" v-model="uiMenu.pidArr" filterable change-on-select></Cascader>
          <!-- <Input v-model="uiMenu.pid" :maxlength="50" :minlength="2"></Input> -->
        </FormItem>
        <FormItem :label="L('UiMenu.Order')" prop="order">
          <InputNumber v-model="uiMenu.order"></InputNumber>
        </FormItem>
        <FormItem :label="L('UiMenu.isEnable')" prop="isenable">
          <i-switch v-model="uiMenu.isEnable"></i-switch>
        </FormItem>
        <FormItem :label="L('UiMenu.Remark')" prop="remark">
          <Input v-model="uiMenu.remark" :maxlength="50" :minlength="2"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">{{L('Cancel')}}</Button>
        <Button @click="save" type="primary">{{L('OK')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../../lib/util";
import AbpBase from "../../../lib/abpbase";
import UiMenu from "@/store/entities/uiMenu";
@Component
export default class EditUiMenu extends AbpBase {
  @Prop({ type: Boolean, default: false }) value: boolean;
  @Prop() permissionTree: any;
  uiMenu: UiMenu = new UiMenu();
  save() {
    (this.$refs.FormData as any).validate(async (valid: boolean) => {
      if (valid) {
           this.uiMenu.pid = this.uiMenu.pidArr.pop();
        var dataup = await this.$store.dispatch({
          type: "uiMenu/update",
          data: this.uiMenu,
        });
        if (dataup.data.success == true) {
          (this.$refs.FormData as any).resetFields();
          this.$emit("save-success");
          this.$emit("input", false);
          this.$Notice.success({
            title: "成功",
            desc: "更新成功.",
          });
        } else {
          this.$Notice.success({
            title: "成功",
            desc: "删除成功.",
          });
        }
      }
    });
  }
  cancel() {
    (this.$refs.FormData as any).resetFields();
    this.$emit("input", false);
  }
  visibleChange(value: boolean) {
    if (!value) {
      this.$emit("input", value);
    } else {
      this.uiMenu = Util.extend(true, {}, this.$store.state.uiMenu.editUiMenu);
      var pidArr = [];
      //   console.log(this.permissionTree);
      //   console.log(this.uiMenu.pid);
      var ReTmp = [];
      this.Isbreak = false;
      var ReTmpv = this.getTree(this.permissionTree, ReTmp);
      this.uiMenu.pidArr = ReTmpv.reverse();
    }
  }
  Isbreak = false;
  getTree(arr, ReTmp) {
    arr.forEach((element) => {
      if (this.Isbreak) return true;

      if (element.value == this.uiMenu.pid) {
        ReTmp.push(element.value);
        this.Isbreak = true;
        return true;
      }

      if (
        element.children != null &&
        element.children != undefined &&
        element.children.length > 0
      ) {
        var Tmpv = this.getTree(element.children, ReTmp);

        if (Tmpv != null && Tmpv.length > 0) {
          this.Isbreak = true;
          //   console.log(Tmpv);

          Tmpv.push(element.value);
          ReTmp = Tmpv;
          //   console.log(ReTmp);
          return true;
        }
      }
    });
    return ReTmp;
  }

  //表单提交 为空提醒
  userRule = {
    name: [
      {
        required: true,
        message: this.L("不可为空"),
        trigger: "blur,change",
      },
    ],
    displayName: [
      {
        required: true,
        message: this.L("不可为空"),
        trigger: "blur,change",
      },
    ],
    permissionKey: [
      {
        required: true,
        message: this.L("不可为空"),
        trigger: "blur,change",
      },
    ],
  };
}
</script>